<template>
    <div class="content">
        <div class="wiki-content-box">
            <div class="blog-content" v-for="item in Items">
                <div class="blog-img">
                    <img :src="'tem.pic_url'">
                    </div>
                <header class="blog-title">
                    <a href="#" target="_blank">{{ item.title }}</a>
                    </header>
                <div class="blog-dec">
                    <p>{{ item.content }}</p>
                    </div>
                </div>
         </div>
        </div>
</template>

<script>
import request from '../link/request.js'
export default {
  name: 'Blog',
  data () {
    return {
      Items: {}
    }
  },
  mounted () {
    this.getThisData()
  },
  methods: {
    getThisData () {
      let that = this
      request.get('/index.php/main/blog/getBlogList')
        .then(function (response) {
          console.log(response)
          that.Items = response
        })
    }
  }
}
</script>

<style scoped>
    body {
        background-color:#393D49;
    }
    .content {
        background: #f8f9fb;
        overflow: hidden;
    }
    .wiki-content-box {
        width: 1080px;
        margin: 65px auto;
        height: auto;
        background: #fff;
        padding: 28px;
        box-shadow: 0 1px 2px rgba(150,150,150,0.3);
        -moz-box-shadow: 0 1px 2px rgba(150,150,150,0.3);/*firefox*/
        -webkit-box-shadow: 0 1px 2px rgba(150,150,150,0.3);/*safari或chrome*/
        box-sizing: border-box;
        min-width: 980px;
        max-width: 1200px;
        border-radius: 4px;
    }
    .blog-content {
        height: auto;
        width: 80%;
        margin: 65px auto;
    }
    .blog-img {
        margin-bottom: 1em;
    }
    .blog-img img {
        border-style: none;
        max-width: 100%;
        height: 208px;
        width: 100%;
        margin: 0 auto;
        vertical-align: middle;
        display: block;
    }
    .blog-title {
        font-size: 28px;
        font-weight: 400;
        line-height: 1.2;
        margin-top: 68px;
    }
    .blog-dec {
        width: 90%;
        height: auto;
        border-bottom: 1px solid #e7e7eb;
        padding: 3.0em 0;
        line-height: 1.7;
        text-rendering: optimizeLegibility;
        margin: 0 auto;
    }
    .blog-dec p {
        color: #666;
    }
</style>
